import React from "react";
import Link from "next/link";
import cls from "classnames";
import LazyLoad from "react-lazyload";
import dayjs from "dayjs";

import style from "./index.module.scss";

interface IProps {
  articles: IArticle[];
  borded?: boolean;
  asCard?: boolean;
  onChange?: () => void;
}
export const ArticleList: React.FC<IProps> = ({
  articles,
  asCard,
  borded,
  onChange
}) => {
  return (
    <div className={cls(style.wrapper, asCard ? style.asCard : null)}>
      {!articles?.length ? <div className={style.none}>暂无文章</div> : null}
      {articles.map(item => (
        <div
          key={item.id}
          className={cls(style.item, borded ? style.borded : null)}
          onClick={onChange}
        >
          <Link href={"/article/[id]"} as={`/article/${item.id}`}>
            <a>
              {item.cover && (
                <LazyLoad>
                  <div className={style.cover}>
                    <img src={item.cover} />
                  </div>
                </LazyLoad>
              )}
              <div className={style.info}>
                <p className={cls(style.title, "one-line-dot")}>{item.title}</p>
                <p className={cls(style.dec, "one-line-dot")}>{item.summary}</p>
                <div className={style.cAt}>
                  <span>阅读· {item.views}次</span>
                  <span>
                    {dayjs(item.publishAt).format("YYYY-MM-DD hh:mm:ss")}
                  </span>
                </div>
              </div>
            </a>
          </Link>
        </div>
      ))}
    </div>
  );
};
